<template>
  <div>
    <van-nav-bar title="分类" />
    <div class="category">
      <van-sidebar v-model="activeKey" @change="onChange">
        <van-sidebar-item
          v-for="(item, index) in CategoryList"
          :title="item.name"
          :key="index"
        />
      </van-sidebar>
      <div class="category-sec">
        <van-divider
          :style="{
            color: '#333',
            borderColor: '#333',
            padding: '0 16px',
          }"
        >
          {{ currentInfo.name }}
        </van-divider>
        <img class="title-img" :src="currentInfo.picUrl" alt="" />

         <van-divider
          :style="{
            color: '#333',
            borderColor: '#333',
            padding: '0 50px',
          }"
        >
          {{currentInfo.desc}}
        </van-divider>


        <van-grid :column-num="3">
          <van-grid-item
            v-for="item,index in currentSecCategory"
            :key="index"
            :icon="item.iconUrl"
            :text="item.name"
            @click="openCategory(item)"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { getCategory, getSecCategory } from "@/network/index.js";
import { NavBar, Sidebar, SidebarItem, Divider, Grid, GridItem } from "vant";

export default {
  name: "Category",
  data() {
    return {
      CategoryList: [],
      activeKey: 0,
      currentInfo: {},
      currentSecCategory: [],
    };
  },
  components: {
    [NavBar.name]: NavBar,
    [Sidebar.name]: Sidebar,
    [SidebarItem.name]: SidebarItem,
    [Divider.name]: Divider,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
  },
  methods: {
    // 获取页面信息
    async getIndexInfo(index) {
      const {
        data: { data }, //解构
      } = await getCategory();
      //分类列表赋值
      this.CategoryList = data.categoryList;
      if(index) {
        const res = await getSecCategory({id: data.categoryList[index].id})
        const list = res.data.data.currentSubCategory
        const info = res.data.data.currentCategory
         //当前展示分类列表赋值
      this.currentInfo = info;
      //当前展示二级分类列表赋值
      this.currentSecCategory = list
      }else {
         //当前展示分类列表赋值
      this.currentInfo = data.currentCategory;
      //当前展示二级分类列表赋值
      this.currentSecCategory = data.currentSubCategory
      }
     
    },
    //分类切换
    async onChange(index) {
      //切换当前展示分类
      this.currentInfo = this.CategoryList[index];
      //根据当前一级分类id请求二级分类
      const {
        data: {
          data: { currentSubCategory },
        },
      } = await getSecCategory({ id: this.CategoryList[index].id });
      //保存二级分类信息
      this.currentSecCategory = currentSubCategory;
    },
    openCategory(item) {
      this.$store.commit('saveCategory',this.activeKey)
      this.$router.push({
        name: 'Search',
        query: {
          // keyword: item.name
          id: item.id
        }
      })
      
    }
  },
  created() {
    
    
    const index = this.$store.state.categoryIndex //如果有分类索引记录就直接跳转对应的索引
    if(index) {
      this.activeKey = index
      this.getIndexInfo(index)
      this.$store.commit('saveCategory',0) //跳转完成后再初始化
    }else {
      this.getIndexInfo(); //获取分类信息
    }
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.van-sidebar-item--select {
  color: #1989fa;
}
.van-sidebar-item--select::before {
  background-color: #1989fa;
}

.category {
  display: flex;
  .category-sec {
    flex: 1;
    .title-img {
      display: block;
      width: 90%;
      margin: 20px auto;
    }
  }
}
</style>

